<template>
  <div id="registerView">
    <div class="logoImage">
      <a-space
        ><img src="/src/assets/logo.png" alt="logo" />
        <h2>欢迎注册 {{systemConstant.WEB_NICKNAME}}</h2></a-space
      >
    </div>
    <div class="loginDiv">
      <a-form
        :model="form"
        :style="{ textAlign: 'center', width: '400px', margin: '0 auto',background: '#fff', border: '1px solid #ccc', borderRadius: '5px', padding: '15px 25px 0 15px' }"
        @submit="handleSubmit"
      >
        <a-form-item
          field="userAccount"
          tooltip="电话、邮箱、用户名"
          label="账号"
        >
          <a-input v-model="form.userAccount" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item field="userPassword" label="密码" tooltip="密码不少于8位">
          <a-input-password
            v-model="form.userPassword"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item field="checkPassword" label="确认密码">
          <a-input-password
            v-model="form.checkPassword"
            placeholder="请确认密码"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">注册</a-button>
          <div style="text-align: right; width: 100%">
            <router-link :to="{ name: 'Login' }"
              >已有账号？立即登录
            </router-link>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import systemConstant from "/src/common/constant/system"

const router = useRouter();
const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
});
const handleSubmit = async () => {
  // const res = await UserControllerService.userRegisterUsingPost(form);
  // if (res.code === 0) {
  //   Message.success("注册成功");
  //   await router.replace({
  //     name: "Login",
  //   });
  // } else {
  //   Message.error("注册失败，" + res.message);
  // }
};
</script>

<style scoped>
.logoImage {
  text-align: center;
  margin-bottom: 20px;
}

.logoImage img {
  height: 58px;
}
</style>
